<template>
  <div class="wms-inventory-detail-page art-full-height">
    <!-- 搜索栏 -->
    <WmsInventoryDetailSearch
      v-model:filter="searchFilter"
      @search="handleSearch"
      @reset="handleReset"
    />

    <ElCard class="art-table-card" shadow="never">
      <!-- 表格工具栏 -->
      <ArtTableHeader
        v-model:columns="columnChecks"
        @refresh="refreshData"
        layout="refresh,size,fullscreen,columns,settings"
      >
        <template #left>
          <ElButton @click="handleExport" v-ripple>
            <ElIcon><Download /></ElIcon>
            导出明细
          </ElButton>
          <ElButton @click="handleRefresh" v-ripple>
            <ElIcon><Refresh /></ElIcon>
            刷新库存
          </ElButton>
        </template>
      </ArtTableHeader>

      <!-- 数据表格 -->
      <ArtTable
        rowKey="id"
        :loading="isLoading"
        :data="tableData"
        :columns="columns"
        :pagination="paginationState"
        @selection-change="handleSelectionChange"
        @pagination:size-change="onPageSizeChange"
        @pagination:current-change="onCurrentPageChange"
      >
        <!-- 自定义列插槽 -->
        <template #itemInfo="{ row }">
          <div class="item-info">
            <div class="item-name">{{ row.itemName }}</div>
            <div class="item-code">{{ row.itemCode }}</div>
            <div class="sku-code">SKU: {{ row.skuCode }}</div>
          </div>
        </template>

        <template #warehouseArea="{ row }">
          <div class="warehouse-area">
            <div>{{ row.warehouseName }}</div>
            <div class="area-name">{{ row.areaName || "-" }}</div>
          </div>
        </template>

        <template #quantity="{ row }">
          <div class="quantity-info">
            <div class="total-qty">总库存: {{ row.totalQuantity || 0 }}</div>
            <div class="available-qty">
              可用: {{ row.availableQuantity || 0 }}
            </div>
            <div class="allocated-qty">
              分配: {{ row.allocatedQuantity || 0 }}
            </div>
          </div>
        </template>

        <template #status="{ row }">
          <ElTag :type="getStatusType(row.status)">
            {{ getStatusText(row.status) }}
          </ElTag>
        </template>

        <template #actions="{ row }">
          <ElButton type="primary" link @click="showDetailDialog(row)">
            <ElIcon><View /></ElIcon>
            查看详情
          </ElButton>
          <ElButton type="info" link @click="showHistoryDialog(row)">
            <ElIcon><Clock /></ElIcon>
            库存历史
          </ElButton>
        </template>
      </ArtTable>
    </ElCard>

    <!-- 库存详情弹窗 -->
    <WmsInventoryDetailDialog
      v-model:visible="detailDialogVisible"
      :detail-data="currentDetailData"
    />

    <!-- 库存历史弹窗 -->
    <WmsInventoryHistoryDialog
      v-model:visible="historyDialogVisible"
      :detail-data="currentDetailData"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useTable } from "@/composables/useTable";
import { WmsInventoryService } from "@/api/wms/inventoryApi";
import { ElMessage } from "element-plus";
import { Download, Refresh, View, Clock } from "@element-plus/icons-vue";

// 导入子组件
import WmsInventoryDetailSearch from "./components/WmsInventoryDetailSearch.vue";
import WmsInventoryDetailDialog from "./components/WmsInventoryDetailDialog.vue";
import WmsInventoryHistoryDialog from "./components/WmsInventoryHistoryDialog.vue";

defineOptions({ name: "WmsInventoryDetail" });

// 表格配置和数据处理逻辑
const {
  tableData,
  columns,
  columnChecks,
  isLoading,
  paginationState,
  searchFilter,
  onPageSizeChange,
  onCurrentPageChange,
  refreshData,
  handleSearch,
  handleReset,
} = useTable<WMS.Inventory.InventoryDetailInfo>({
  core: {
    apiFn: WmsInventoryService.getInventoryDetailList,
    apiParams: {
      current: 1,
      size: 20,
    },
    columnsFactory: () => [
      {
        type: "selection",
        width: 50,
      },
      {
        prop: "itemInfo",
        label: "商品信息",
        slot: "itemInfo",
        minWidth: 200,
        fixed: "left",
      },
      {
        prop: "warehouseArea",
        label: "仓库/库区",
        slot: "warehouseArea",
        width: 150,
      },
      {
        prop: "quantity",
        label: "库存数量",
        slot: "quantity",
        width: 150,
        align: "center",
      },
      {
        prop: "unit",
        label: "单位",
        width: 80,
        align: "center",
      },
      {
        prop: "status",
        label: "状态",
        slot: "status",
        width: 100,
        align: "center",
      },
      {
        prop: "lastUpdateTime",
        label: "最后更新",
        width: 150,
        align: "center",
      },
      {
        prop: "actions",
        label: "操作",
        slot: "actions",
        width: 150,
        fixed: "right",
        align: "center",
      },
    ],
  },
});

// 选中的行
const selectedRows = ref<WMS.Inventory.InventoryDetailInfo[]>([]);

// 弹窗状态管理
const detailDialogVisible = ref(false);
const historyDialogVisible = ref(false);
const currentDetailData = ref<WMS.Inventory.InventoryDetailInfo | null>(null);

// 选择变化处理
const handleSelectionChange = (
  selection: WMS.Inventory.InventoryDetailInfo[],
) => {
  selectedRows.value = selection;
};

// 获取状态类型
const getStatusType = (status: string) => {
  const statusMap = {
    normal: "success",
    low: "warning",
    out: "danger",
    frozen: "info",
  };
  return statusMap[status] || "info";
};

// 获取状态文本
const getStatusText = (status: string) => {
  const statusMap = {
    normal: "正常",
    low: "库存不足",
    out: "缺货",
    frozen: "冻结",
  };
  return statusMap[status] || "未知";
};

// 显示详情弹窗
const showDetailDialog = (row: WMS.Inventory.InventoryDetailInfo) => {
  currentDetailData.value = { ...row };
  detailDialogVisible.value = true;
};

// 显示历史弹窗
const showHistoryDialog = (row: WMS.Inventory.InventoryDetailInfo) => {
  currentDetailData.value = { ...row };
  historyDialogVisible.value = true;
};

// 导出处理
const handleExport = () => {
  ElMessage.info("导出功能开发中");
};

// 刷新库存
const handleRefresh = () => {
  ElMessage.info("刷新库存功能开发中");
};

// 页面初始化
onMounted(() => {
  refreshData();
});
</script>

<style lang="scss" scoped>
.wms-inventory-detail-page {
  .item-info {
    .item-name {
      font-weight: 500;
      color: var(--el-text-color-primary);
    }

    .item-code,
    .sku-code {
      font-size: 12px;
      color: var(--el-text-color-secondary);
      margin-top: 2px;
    }
  }

  .warehouse-area {
    .area-name {
      font-size: 12px;
      color: var(--el-text-color-secondary);
      margin-top: 2px;
    }
  }

  .quantity-info {
    font-size: 12px;

    .total-qty {
      font-weight: 500;
      color: var(--el-text-color-primary);
    }

    .available-qty {
      color: var(--el-color-success);
      margin-top: 2px;
    }

    .allocated-qty {
      color: var(--el-color-warning);
      margin-top: 2px;
    }
  }
}
</style>
